.opction .opction_con{
  display:none;
}

.header{
  height:250*2/75rem;
  background:-webkit-linear-gradient(left,#3a99f7,#3f6fde);
  overflow:hidden;
  .box{
    height:250*2/75rem;
    width:250*2/75rem;
    margin:0 auto;
    border-radius:50%;
    background: repeating-radial-gradient(at center, #71a5ee 30%, #60a1f1 25%,#4e98f1 50%);
    position:relative;
    .user_head{
      width:80*2/75rem;
      height:80*2/75rem;
      border-radius:50%;
      background:#fff;
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      img{
        width:70*2/75rem;
        height:70*2/75rem;
        border-radius:50%;
        margin:5*2/75rem 5*2/75rem;
      }
    }
    .user_name{
      position:absolute;
      left:50%;
      bottom:65*2/75rem;
      transform: translateX(-50%);
      span{
        font-size:14*2/75rem;
        color:#fff;
      }
    }
  }

}

.content .user_sum{
  display:flex;
  margin-top:10*2/75rem;
  background:#fff;

  .item{
    flex:1;
    border-right:1*2/75rem solid #eee;
    text-align:center;
    margin-bottom:10*2/75rem;

    p{
      font-size:14*2/75rem;
    }
    p:first-child{
      color:#5971d3;
      margin-bottom:8*2/75rem;
    }
  }
  .item:last-child{
    border-right:0;
  }
}

.content{
  background:#f2f3f7;
}

.content .user_select{
  display:flex;
  flex-wrap:wrap;
  margin-top:10*2/75rem;
  background:#fff;

  .item{
    width:125*2/75rem;
    height:80*2/75rem;
    border-right:1px solid #ececec;
    border-bottom:1px solid #ececec;
    box-sizing:border-box;
    padding:15*2/75rem 0;
    text-align:center;
    p{
      font-size:15*2/75rem;
    }
    .iconfont{
      font-size:25*2/75rem;
    }
  }
}

.footer-con{
  width:100%;
  position:absolute;
  bottom:0;
  display:flex;
  background:#f2f3f7;
  height:60*2/75rem;
  .item{
    flex:1;
    text-align:center;
    padding:5*2/75rem 0;
    .iconfont{
      font-size:25*2/75rem;
    }
    p{
      font-size:15*2/75rem;
    }
  }
}

.active{
  color:#5c7efa;
}